<template>
    <div class="container min-h-screen min-w-full flex align-middle">
        <div class="loginPop">
            <el-row class="h-14">
                <el-col class="text-sky-400 text-2xl title">用户注册</el-col>
            </el-row>
            <el-form ref="registerForm" :model="state.registerForm" :rules="state.rules" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="账号" prop="userName">
                            <el-input v-model="state.registerForm.userName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="密码" prop="password">
                            <el-input type="password" v-model="state.registerForm.password"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="确认密码" prop="confirmPassword">
                            <el-input type="password" v-model="state.registerForm.confirmPassword"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="state.registerForm.email"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号" prop="phoneNumber">
                            <el-input v-model="state.registerForm.phoneNumber"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="fullName">
                            <el-input v-model="state.registerForm.fullName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="sex">
                            <el-select v-model="state.registerForm.sex" placeholder="请选择">
                                <el-option label="男" value="0"></el-option>
                                <el-option label="女" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="个人简介" prop="introduction">
                    <el-input type="textarea" v-model="state.registerForm.introduction" :rows="5" :cols="30"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="flex justify-between">
                        <el-button type="primary" @click="submitForm">提交</el-button>
                        <el-button type="plain" @click="toLogin">返回</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
   
<script setup>
import { register } from '../api/index'
import { reactive, ref } from "vue"
const registerForm = ref()
import { useRouter } from 'vue-router'
const router = useRouter() //实例化
// 在验证规则中使用自定义校验函数
const validatePassword = (rule, value, callback) =>
{
    console.log(state.registerForm.password);
    if (value === '' || value === state.registerForm.password) {
        callback();
    } else {
        callback(new Error('两次输入密码不一致'));
    }
};
const state = reactive({
    registerForm: {
        userName: 'admin123456',
        password: '111',
        confirmPassword: '111',
        email: '2029481325@qq.com',
        phoneNumber: '19815133485',
        fullName: '程封',
        sex: 1,
        introduction: '测试',
    },
    rules: {
        userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        confirmPassword: [
            { required: true, message: '请确认密码', trigger: 'blur' },
            { validator: validatePassword, trigger: 'blur' },
        ],
        email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
        ],
        phoneNumber: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
        ],
        fullName: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        sex: [
            { required: true, message: '请选择性别', trigger: 'change' },
        ],
        introduction: [
            { required: true, message: '请输入个人简介', trigger: 'blur' },
        ],
    }
})


const submitForm = () =>
{
    registerForm.value.validate((valid) =>
    {
        if (valid) {
            register(state.registerForm).then(res =>
            {
                ElMessage({
                    showClose: true,
                    message: '注册成功',
                    type: 'success',
                })
                setTimeout(toLogin, 3000)
            }).catch(err =>
            {
                console.log(err)
            })

        } else {
            console.log('注册失败')
            return false
        }
    })
}

// 返回登录页面
const toLogin = () =>
{
    router.push('/login')
}
</script>
<style lang="scss" scoped>
.title {
    font-weight: 800;
    -webkit-text-stroke: 0.2px rgb(255, 255, 255)
}

:deep .el-form-item__content {
    display: inline-block !important;
}

.container {
    position: relative;
    /* 背景颜色设置为黑色 */
    overflow: hidden;

    /* 隐藏溢出的内容 */
    .loginPop {
        /* 元素清晰 */
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        /* 可以添加其他样式以美化 .loginPop */
    }
}

.container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../assets/ifont/pic/bg.jpg") no-repeat;
    transform: scaleX(-1);
    background-size: cover;
    background-position: center;
    filter: blur(1px);
    /* 背景图片模糊 */
    z-index: -1;
    /* 位于容器背后 */
}

:deep .el-form-item__label {
    color: rgb(24, 24, 24);
}
</style>